The theme of a user interface (UI) element and/or control defines the overall look, feel and appearance of the element and/or control. UI elements can be designed to take on any number of themes. For instance, a UI element 1600 that can be themed is shown in FIG. 16. The UI element 1600 is a graphical image that can be designed to be rendered onto many types of context, such as a monitor of a computer. The UI element shown in FIG. 16 is an image that is designed to represent a rewind button that may appear during any of a number of applications carried out on the computer. A rewind button is merely one of any number of UI elements (e.g. control, control button, scrollbar, toolbar, combination box) that can be themed by a theme author.
Depending upon various factors, such as an intended user or target audience, the theme of the UI element can be designed to convey a desired look and feel. The theme of an image is a function of, among other things, the color, shade and texture used in the design of the image. As with most images, UI elements may be made up of one or more components. Such components may include glyphs. A glyph is simply one type of character of figure within an image. For instance, in the rewind button 1600 there is a first component, which is a rectangular background 1602 and a second component, which includes two triangles 1604, 1606 that point to the left. The triangles 1604, 1606 are glyphs and serve to enable the button 1600 to be identified as a rewind button.
To theme an image, one or more of the components that make up the image can themselves be designed with a theme by a theme author. For instance, the rewind button 1600 has a rather conservative theme wherein the background 1602 and the glyphs 1604, 1606 are simply black and white and are not filled in with shading or coloring. Alternatively, the same UI element 1700 illustrated in FIG. 17, is designed to have a somewhat more flashy theme. This flashy theme may be a consumer based theme that is intended to aesthetically appeal to consumers. In this theme, both the background 1702 and the glyphs 1704, 1706 are shaded with a light gray color. In this fashion, they appear to be made out of a polished chrome material.
It may be desirable to change the size of a themed UI element at times. Certain actions may make changing the size of themed UI element desirable. For example, when a computer is configured it may be desirable to adjust the size of a UI element based upon a particular configuration that the computer is set to. This may occur, for instance, where a control panel is accessed to adjust certain settings. For example, a window 1800 that may be displayed on a computer monitor is illustrated in FIG. 18. Three UI elements 1810, 1820 and 1830 are located in the upper right hand corner of the window 1800 and reside within a uniformly colored border 1840. The UI elements 1810, 1820 and 1830 can be associated with different functions, such as to minimize, shrink and close the window, respectively.
In FIG. 19, the same window 1900 is illustrated at a significantly reduced size. The three UI elements 1910, 1920 and 1930, however, have not been reduced in size. It is not uncommon for UI elements such as these, which are located in corner sections, to not be sized. As such, the size of these elements may seem out of proportion with respect to other elements and images.
Additionally, while the border 1940 has been reduced in size horizontally or in the X direction, the border 1940 has not been reduced in size vertically or in the Y direction. It is not uncommon for elements located near the top and bottom of such a window 1900 to only be sized in the X direction, but not in the Y direction. As such, the height or thickness of these elements may appear out of proportion with respect to other elements. Similarly, it is not uncommon for elements located near the sides of the window to only be sized in the Y, but not in the X direction. As such, the width of these elements may appear out of proportion with respect to other elements.
When the size of a themed UI element is altered, resolution of that image may be diminished. More particularly, as shown in FIG. 20, when the size of a themed UI element 2000 is changed (e.g. enlarged), one or more of the components, such as the glyphs 2004, 2006, that make up the UI element may lose resolution, such as by becoming pixelated. Pixelation often causes lines to appear jagged 2010, 2012. While the degree of pixelation 2010, 2012 shown in FIG. 20 may be exaggerated, those skilled in the art generally appreciate the effect of pixelation.
A loss of resolution, can be a function of, among other things, the format that the image is stored in. An image can be stored in the memory of a computer as a bitmap, a font, a scalable font or a vector format image (hereinafter “vector”). Bitmaps, fonts, scalable fonts and vectors are generally well known to those skilled in the art and therefore are not discussed in great detail. A bitmap 2100 that includes a representation of the letter A is shown in FIG. 21. Suffice it to say, in a simple case a bitmap contains a plurality of dots organized into rows 2110 and columns 2120 which form a grid. A bitmap representation of an image uses the grid of dots to represent the image. More particularly, each dot within the grid has a value assigned to it. The value assigned to each of the dots controls the appearance of each respective dot. For instance, the dots can have a value of 0 or 1. The dots that have a value of 0 are not turned on and do not appear darkened. The dots that have a value of 1 are turned on, however, and do appear darkened. Accordingly, in FIG. 21, the darkened dots define the letter A. Often additional information is associated with each of the dots to further control and enhance the appearance of the dots. For instance, additional values are commonly associated with each of the dots such that the dots have a particular color and/or are darkened to a greater or lesser degree. This can be used to effect the desired themed appearance of the image. The greater the number of dots, the greater the resolution of the image, however, more dots generally means that more information has to be stored in the computer (e.g. an increased number of 1's and 0's); this can put a strain on the memory capabilities and/or tax the storage capacity of a computer.
Bitmaps of an image are generally designed under a particular number of dots per inch (DPI). For instance, the letter A, shown in FIG. 21, is designed under a 9 DPI setting because there are nine dots within one inch. When a bitmap is rendered to some context, the dots of the bitmap generally correspond to the pixels of the context being rendered to (e.g. a printer or computer monitor). A pixel is the smallest element in the context rendered to. Pixels are the objects that are actually turned on or illuminated within the context to display an image. Accordingly, the size of the image can change depending upon the DPI that the image was designed under and the DPI of the context that the image is being rendered to. More particularly, when the DPI of the context being rendered to is the same as the DPI that the bitmap of the image was designed under, the size of the image is not affected. However, when the DPI that the bitmap of the image was designed under differs from the DPI of the context that the image is being rendered to, the size of the image can change. This is because the DPI of the bitmap is fixed. For instance, when a one inch image is designed under 200 DPI and is rendered to a 200 DPI context, the size of that image is not altered and that image appears as a one inch image. However, when that same one inch image which is designed under 200 DPI, is rendered to a 400 DPI context, the size of the image is altered and the image appears as only a one half inch image. The size of the image is reduced by half because it only takes half of the space of the 400 DPI context to accommodate the 200 pixels that make up the image. Therefore, the size of the image may need to be altered (e.g. stretched) to appear as its original one inch size. However, stretching the 200 DPI image across a 400 DPI context, can reduce the resolution of the image. This is because the 200 dots are spread across 400 pixels, instead of the intended 200 pixels. As such, this stretching can lead to pixelation and/or other types of undesirable results.
Instead of a bitmap, an image can be stored in the memory of a computer as a scalable font. A scalable font is essentially a specific instance of a vector. Vectors are discussed in further detail below. Scalable fonts require less information to be stored in the computer than a bitmap and therefore take up less space within the memory of a computer. However, scalable fonts require more processing to be performed by the computer prior to being rendered to a context. A font is a set of shapes, most often character shapes, that typically represent each character in an alphanumeric character set. These character shapes can, however, also include other shapes, such as glyphs. The font of a character set usually refers to some design characteristics common to characters within the set. For instance, each character of a particular font can have some common design characteristics, such as line thickness, typeface, bold, italics, etc. These characteristics can also be related to the theme of the characters. Different fonts typically have different design characteristics and are identifiable by a name, such as Courier, Times New Roman, Serif, etc. It is to be appreciated that each of the characters of a font can be stored as bitmaps. However, this may require a substantial amount of memory and storage capacity as each character is stored as a separate bitmap. Therefore, for each font, a plurality of bitmaps equal in number to the number of characters within that font usually need to be stored. The memory requirements of font based characters can increase dramatically as the number of different fonts increases.
Unlike a bitmapped font, each character shape in a scalable font is defined in terms of one or more outlines that define the shape of the character. The outlines are themselves created and defined by a set of points which are interconnected by a series of lines and curves. More particularly, the outlines are defined by a starting point and a subsequent move (e.g. via a particular line or curve) that is traversed to interconnect the starting point to the next point. This process is repeated in a predefined order until all of the points are sequentially interconnected by appropriate lines or curves. The points represent locations within a grid which is a two dimensional coordinate system whose x-axis describes movement in the horizontal direction and whose y-axis describes movement in the vertical direction.
As such, scalable font based shapes are templates or mathematical outlines for drawing each of the characters in the character set. The outlines are models for sizes of the characters within the font. The process of sequentially interconnecting the points is controlled by a set of instructions associated with the character. For instance, one set of instructions would be associated with the font for one of the glyphs shown in FIGS. 16 and 17. Executable subroutines known as hints can also be associated with the characters of a font. These subroutines can be executed as is necessary to adjust the outlines of the characters based upon the scaled size of the characters; this helps to ensure that the characteristics of the original design are preserved when the character is rendered at different sizes to different contexts.
Software, such as rasterizer programs, can be used to render a font based character to a context. When a font based character is desired, a first part of a rasterizer program known as an interpreter is activated. The interpreter interprets or follows the instructions for the desired character. The interpreter takes into account the size of the image and DPI of the context being rendered to and uses that information in conjunction with the instructions for that particular character to draw the outline of that character. In this fashion, the character is drawn according to the size and DPI of the context being rendered to.
Because the character is defined in terms of points within a grid which are sequentially interconnect by predefined lines and curves, the outline of the character can be converted into a bitmap so that it can be rendered to a context. Accordingly, a second part of a rasterizer program, known as a scan converter, can convert the outline of the character to a bitmap so that it can be rendered to a context. The scan converter superimposes a grid over the outline of the character. Values are assigned to the dots within the bitmap according to those pixels within the context that should be turned on in order to render the image of the character on the context.
As an alternative to scalable fonts, which are essentially specific instances of vectors, characters can also be defined as vectors. Vectors are mathematical and/or geometric formulas that define a character or image. Generally speaking, to scale a vector based image, only the coefficients of the geometric formula for that image need to be changed. Additional commands can also be associated with the formula for a vector based image. These commands usually control other aspects of the image, such as the shade, color and/or gradient (e.g. transition between one or more colors) of the image. These can also be used to tailor the theme of the vector based image. As a general rule, vector based images require less memory than bitmaps, but they still require some processing prior to being rendered to a context. This is particularly true where the vector based image is scaled. When a vector based image is scaled, the formula, or more appropriately the coefficients therein, that define the image are altered so that the image can be drawn appropriately. Since the equations that define vector based images are adjusted each time the images are sized, these images experience a minimal loss of resolution. However, vectors do have limitations. For instance, while vectors work well for graphics that are readily definable by mathematical formulas (e.g. circles, squares, rectangles), they can become very cumbersome when they are used to define images that are made up of intricate and ornate graphics. Additionally, because vectors only represent images drawn with mathematical formulas, in general vectors can not be used to represent reality based images, such as photographs. To render a vector based image to a context, software, such as the aforementioned rasterizer programs, can be implemented.
A loss of resolution can also be a function of the manner within which the size of the image is changed. For instance, if a bitmap of an image is altered and different portions of the bitmap are adjusted differently, different portions of the image may experience pixelation to a greater or lesser degree. For instance, if one part of an image, such as the middle of the window shown in FIGS. 13, 18 and 19 are altered more than the other parts of the image, then that part of the image may experience an inordinate amount of pixelation as compared to the rest of the image. Elements within the corner sections of the window, such as the UI elements 1810, 1820, 1830 may, for example, experience little or no pixelation. This may make the appearance of the rendered image worse than if the entire image were stretched equally. Additionally, if different portions of an image are adjusted differently, portions of the image (e.g., elements 1910, 1920, 1930) may appear out of proportion with respect to the rest of the image.
Conventional bitmap sizing methodology does not size all portions of a bitmap equally. Conventional bitmap sizing methodology is discussed with reference to FIG. 22. In conventional bitmap sizing methodology, a bitmap 2200 is divided up into nine sections or grids which usually include four corner sections 2202, 2206, 2214, and 2218, a middle section 2210, left 2208 and right 2212 side sections, and top 2204 and bottom 2216 sections. When the size of an image is changed, one or more of the nine sections are altered to increase or decrease the size of the image. Under conventional nine grid sizing methodologies, the size of each of the four corner sections 2202, 2206, 2214 and 2218 is usually preserved while the size of the middle section 2210 is increased or decreased in both the horizontal or X 2220 and vertical or Y 2222 directions, the size of the left 2208 and right 2212 side sections are only increased or decreased in the vertical 2224 direction and the size of the top 2204 and bottom 2216 sections are only increased or decreased in the horizontal 2226 direction.
Often, very little, if any, of the image to be sized is located within the four corner section of the bitmap as those sections typically contain information that is to remain the same size. In this case, while the image can appear pixelated, sizing the bitmap with nine grid methodologies does not cause parts of the image to appear disproportionate with respect to other parts of the image. Similarly, the entire bitmap is often filled in with a uniform texture, solid color or gradient (e.g. transition from one color to another). In this case, sizing the different sections of the bitmap differently, does not have a deleterious affect on the image because the solid color appears the same throughout every section of the bitmap regardless of the change to their size.
Conventionally, the manner and degree to which the size of each of the nine sections is altered is controlled by controlling the margins 2228 of the nine sections. For instance, a set of four numbers corresponding, respectively, to the margins 2228 of the nine sections (e.g. the non-sizable four corner sections 2202, 2206, 2214 and 2218, the vertically sizable side sections 2208, 2212, the horizontally sizable top 2204 and bottom 2216 sections and the bi-directionally sizable middle section 2210) may be varied to scale the image. By altering these numbers, margins 2228 of the nine grid are changed to alter each of the nine sections and thereby alter the size of the image. However, in accordance with the foregoing discussion, conventionally these numbers do not alter the size the nine sections uniformly.